<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>機票網上購 輕鬆享折扣</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
body {
	background-color: #D6EBFF;
	font-family: 'Arial', sans-serif;
	padding: 20px;
}

.main {
	background: url("images/background.jpg");
	background-repeat: no-repeat;
}

table {
	width: 1177px;
	height: 779px;
}

.bd {
	text-align: center;
}

.container {
	margin: 0 auto;
	width: 599px;
}

.slot1 {
	background: url("images/bar_normal.png") repeat-y;
	width: 197px;
	height: 160px;
	float: left;
	background-position: 0 804px;
	position: relative;
	top: -30px;
	left: -50px;
}

.slot2 {
	background: url("images/bar_normal.png") repeat-y;
	width: 197px;
	height: 160px;
	float: left;
	background-position: 0 201px;
	position: relative;
	top: -30px;
	left: 5px;
}

.slot3 {
	background: url("images/bar_normal.png") repeat-y;
	width: 197px;
	height: 160px;
	float: left;
	background-position: 0 402px;
	position: relative;
	top: -30px;
	left: 65px;
}

.motion {
	background: url("images/bar_motion.png") repeat-y;
}

.startBtn {
	background: url("images/start.png") no-repeat;
	background-size: 110px Auto;
	background-position: center center;
}

.stopBtn {
	background: url("images/stop.png") no-repeat;
	background-size: 110px Auto;
	background-position: center center;
}

.resetBtn {
	background: url("images/reset.png") no-repeat;
	background-size: 110px Auto;
	background-position: center center;
}

button {
	background-color: rgba(0, 0, 0, 0);
	width: 100px;
	height: 100px;
	line-height: 100px;
	border-radius: 100px; /* 高度 */
	border: 0;
	font-size: 30px;
	cursor: pointer;
	position: relative;
	top: -170px;
	left: 440px;
	font-family: 'Arial', sans-serif;
	font-weight: bold;
	color: #ffffff;
}

#result {
	margin: 20px 0;
	height: 22px;
	position: relative;
	top: 380px;
}

.credits {
	font-size: 15px;
	margin-top: 20px;
}

.credits .browsers {
	font-style: italic;
	font-size: 14px;
	color: #777;
	margin-top: 4px;
}

.clear {
	clear: both;
}

.msgClass {
	font-family: '微軟正黑體', serif;
	font-size: 36px;
	font-weight: bold;
	color: red;
}
</style>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Montserrat">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.spritely.js"></script>
<script src="js/jquery.backgroundPosition.js"></script>
<script src="js/slot.js"></script>
<script src="js/jquery.preload.min.js"></script>
<script type="text/javascript">
	$.preload('images/background-fw.gif');
</script>
</head>

<body>
	<table>
		<tr>
			<td class="main">
				<div class="bd">
					<div class="container">
						<div id="result" class="msgClass"></div>
						<div>
							<button id="control" data-status="Start" class="startBtn"></button>
						</div>
						<div class="">
							<div id="slot1" class="slot1"></div>
							<div id="slot2" class="slot2"></div>
							<div id="slot3" class="slot3"></div>
							<div class="clear"></div>
						</div>

					</div>
					<div class="credits">
						<div class="browsers"></div>
					</div>
				</div>
			</td>
		</tr>
	</table>
	<audio id="aroll">
		<source src="audio/roll.ogg" type="audio/ogg">
		<source src="audio/roll.mp3" type="audio/mpeg">
	</audio>
	<audio id="awin">
		<source src="audio/cheering.ogg" type="audio/ogg">
		<source src="audio/cheering.mp3" type="audio/mpeg">
	</audio>
	<audio id="anowin">
		<source src="audio/nowin.ogg" type="audio/ogg">
		<source src="audio/nowin.mp3" type="audio/mpeg">
	</audio>
	<audio id="aslot">
		<source src="audio/slot.ogg" type="audio/ogg">
		<source src="audio/slot.mp3" type="audio/mpeg">
	</audio>
</body>
</html>
